<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="./index.css" />
	</head>

	<body>
		<!-- 头像 -->
		<div class="Avatar">
			<div class="img"></div>
			<h1 class="title">AI Travel Pocket</h1>
		</div>
		<!-- tab栏切换 -->
		<div class="TabSwitching">
			<span data-id='1' class="TabSwitching-active">设备绑定</span>
			<span data-id='2'>登录</span>
		</div>
		<div class="prompt">首次使用，请先配置Pocket完成绑定</div>
		<!-- tab栏切换页面1-->
		<div id="page1" class="mui-content ">
			<ul class="card">
				<li data-id="1">
					<div class="img"></div>
					<div class='mode'>方式一</div>
					<div class="content1">配置Pocket通过Wi-Fi入网</div>
					<div class="content2">请先使用USB-C连接线将Pocket设备连接至这台PC以配置Wi-Fi</div>
				</li>
				<li data-id="2">
					<div class="img"></div>
					<div class='mode'>方式二</div>
					<div class="content1">配置Pocket通过有线网络入网</div>
					<div class="content2">请先将Pocker通过网线连接至互联网</div>
				</li>
			</ul>
		</div>
		<!-- tab栏切换页面2-->
		<div id="page2" class="mui-content" style="display:none;">
		<form class="myDialog-input-group">
		        <label class="lab">账号</label>
		    <div class="mui-input-row"> 
		    <input type="text"  placeholder="输入登录账号">
		    </div> 
		        <label class="lab">密码</label>   
		    <div class="mui-input-row">
		        <input type="text"  placeholder="输入登录密码">
		    </div>  
		   <button type="button"  class="mui-btn mui-btn-primary login-btn" onclick="">确认</button>
		</form>
		</div>
		<!-- 配置Wi-Fi对话框 -->
		<dialog id="myDialog">
			<script src="./components/ConfigureWiFi.js"></script>
		</dialog>
		<!-- 绑定设备id对话框 -->
		<dialog id="myDialog1">
			<script src="./components/DeviceID.js"></script>
		</dialog>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
			//table栏切换设备绑定和登录
			mui('.TabSwitching').on('tap', 'span', function(e) {
				mui('.TabSwitching-active')[0].classList.remove("TabSwitching-active")
				e.target.classList.add('TabSwitching-active')
				mui(`#page${e.target.dataset.id}`)[0].style.display = 'block'
				mui(`#page${e.target.dataset.id=='1'?'2':'1'}`)[0].style.display = 'none'

			})
			//方式一二选中事件 
			mui('.card').on('tap', 'li', function() {
				mui('.card-active')[0]?.classList?.remove("card-active")
				this.classList.add('card-active')
				//打开弹窗
				openDialog(this.dataset.id)
			})
			// 打开对话框函数
			function openDialog(number) {
				//打开弹窗是背后不可滑动
				document.body.classList.add('modal-open');
				+number===1?openMethod1Dialog():openMethod2Dialog();
			}
			// 关闭对话框函数
			function closeDialog(number,type=false) {
				document.body.classList.remove('modal-open');
				+number===1?Method1.close():type?Method2Submit() :Method2.close()
			}
		
		
		</script>
	</body>

</html>